<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>订单查询结果</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }
    .container {
      max-width: 600px;
      margin: 0 auto;
    }
    h1 {
      text-align: center;
    }
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      padding: 8px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
    th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
<div class="sidebar" th:replace="twoGroup/twoGroup.html"></div>
<div class="container">
  <h1>订单查询结果</h1>

  <!-- 如果查询结果为空，显示以下消息 -->
  <div id="no-results" style="display: none;">
    <p>没有找到匹配的订单。</p>
  </div>

  <!-- 订单结果表格 -->
  <table id="order-results">
    <thead>
    <tr>
      <th>订单号</th>
      <th>客户姓名</th>
      <th>订单发货日期</th>
      <th>订单收货日期</th>
    </tr>
    </thead>
    <tbody>
    <!-- 查询结果将动态插入到这里的tbody中 -->
    <tr>
      <td>ORD12345</td>
      <td>商品A</td>
      <td>2</td>
      <td>$20.00</td>
    </tr>
    </tbody>
  </table>
</div>

<script>
  // 假设这是从服务器获取到的查询结果
  var queryResults = [
    {
      orderNumber: "123456",
      customerName: "张三",
      orderDate: "2023-04-15",
      shipDate: "2023-04-16"
    }
    // ... 更多的订单数据
  ];
  // 函数来渲染查询结果到表格中
  function renderOrderResults(results) {
    var tbody = document.getElementById('order-results').tBodies[0];
    tbody.innerHTML = ''; // 清空旧的结果

    if (results.length === 0) {
      document.getElementById('no-results').style.display = 'block';
      return;
    }

    results.forEach(function(result) {
      var row = document.createElement('tr');

      var orderNumberCell = document.createElement('td');
      orderNumberCell.textContent = result.orderNumber;
      row.appendChild(orderNumberCell);

      var customerNameCell = document.createElement('td');
      customerNameCell.textContent = result.customerName;
      row.appendChild(customerNameCell);

      var orderDateCell = document.createElement('td');
      orderDateCell.textContent = result.orderDate;
      row.appendChild(orderDateCell);

      var totalAmountCell = document.createElement('td');
      totalAmountCell.textContent = result.shipDate;
      row.appendChild(totalAmountCell);

      tbody.appendChild(row);
    });
  }
  // 调用函数渲染查询结果
  renderOrderResults(queryResults);
</script>
<div th:replace="twoGroup/twoGroupmain.html"></div>
</body>
</html>